<template>
  <div class="generalize-perform">

    <div class="perform-box">

      <van-list v-model="loading" :finished="finished" @load="onLoad">
        <div class="perform-content" v-for="(business,index) in businessList" :key="index">
          <div class="perform-line"></div>
          <div class="business-content">
            <img :src="business.userUrl" v-if="business.userUrl" class="business-avatar"/>
            <span class="business-avatar" v-else></span><span class="business-name">{{business.userName}}</span>
            <img src="./next.png" class="next-icon" onclick="return false"
                 @click="queryPerformanceDetail(business.id)"/>
          </div>

          <div class="business-statistics">
            <div class="total-num1">
              总推广人数：<span class="generalize-total">{{business.totalNum}}人</span>今日推广人数：<span class="generalize-total">{{business.todayNum}}人</span>
            </div>
            <div class="total-num2">
              <span class="note-text">备注：{{business.remark?business.remark:"-"}}</span>
              <img src="./note.png" class="note-icon" @click="editNote(business.id)"/>
            </div>
            <div class="total-num3">
              <span>推广开始：{{business.time | format}}</span><span class="leave-time" v-if="business.status == 1">辞退：{{business.setTime | format}}</span>
              <button type="button" class="leave" v-if="business.status == 0" @click="openLeaveModal(business.id)">辞退</button>
            </div>
          </div>
        </div>
      </van-list>

    </div>

    <div class="empty-wrap" v-if="businessList.length == 0 && !loading">
      <div class="empty-box">
        <div class="img-box"><img src="./empty.png" class="empty" onclick="return false"/></div>
        <div class="tip">暂无推广业绩~</div>
      </div>
    </div>

    <div class="write-note-modal" v-show="showNote" @click="closeNote"></div>
    <div class="write-note-box" v-show="showNote">
      <div class="title">编辑备注</div>
      <div class="award-con">
        <div class="name-box">
          <input type="text" placeholder="请填写备注" v-model="noteVal" class="name" maxlength="10"/>
        </div>
      </div>
      <div class="press-box">
        <button type="button" class="confirm" @click="writeNote(1)">确定</button>
      </div>
    </div>

    <v-dialog v-model="leaveModal" content="是否辞退该推广员？" cancelText="否" confirmText="是" @confirm="leaveEmp"
              @cancel="closeLeaveModal"></v-dialog>

  </div>
</template>

<script>
  import {baseUrl} from "../../../config/env";
  import {formatDate, getUrlKey} from "../../../config/util";
  import dialog from "../../../components/dialog";

  export default {
    inject: ['reload'],
    name: "generalizePerform",
    data() {
      return {
        leaveModal: false,
        showNote: false,
        currentPage: 1,
        PageSize: 20,
        loading: false,
        finished: false,
        businessList: [],
        timer: null,
        noteVal: '',
        promotionId: '',
        role: getUrlKey("role"),
        userName: getUrlKey("userName"),
        userUrl: getUrlKey("userUrl"),
        tag: getUrlKey("tag"),//身份唯一标识
        tagId: getUrlKey("tagId")//登录标识
      }
    },
    methods: {
      onLoad() {
        if (!this.timer) {// 异步更新数据
          this.timer = setTimeout(() => {
            this.getPerformance();
            this.timer = null;
          }, 500)
        }
      },
      getPerformance() {//推广业绩列表
        this.axios.get(baseUrl + "/promotion/get_pro_user_list?sgin=" + this.tagId + "&page=" + this.currentPage + "&size=" + this.PageSize).then((res) => {
          let performanceObj = res.data;
          if (performanceObj.code == 0) {
            if (performanceObj.data != null && performanceObj.data.length > 0) {
              this.businessList = this.businessList.concat(performanceObj.data);
              this.loading = false;
              this.currentPage++;
            } else {
              this.loading = false;
              if (this.businessList.length >= performanceObj.data.length) {
                this.finished = true;
              }
            }
          } else {
            this.$vux.toast.text(performanceObj.msg, "middle");
          }
        }).catch(() => {
          this.$vux.toast.text("网络异常", "middle");
        });
      },
      queryPerformanceDetail(id) {
        this.$router.push({
          path: "/performanceDetail", query: {
            "role": this.role,
            "userName": this.userName,
            "userUrl": this.userUrl,
            "tag": this.tag,
            "tagId": this.tagId,
            "promotionId": id
          }
        });
      },
      writeNote(noteType) {
        this.axios.get(baseUrl + "/promotion/update_pro_remark?sgin=" + this.tagId + "&promotionId=" + this.promotionId + "&type=" + noteType + "&remark=" + (noteType == 1 ? this.noteVal : '')).then((res) => {
          let retObj = res.data;
          if (retObj.code == 0) {
            if (retObj.data == 0) {
              let message = noteType == 1 ? '编辑备注失败，请重试' : '辞退失败,请重试';
              this.$vux.toast.text(message, "middle");
              return;
            } else {
              this.leaveModal = false;
              this.reload();
            }
          } else {
            this.$vux.toast.text(retObj.msg, "middle");
          }
        }).catch(() => {
          this.$vux.toast.text("网络异常", "middle");
        });
      },
      closeNote() {
        this.showNote = false;
      },
      editNote(id) {
        this.promotionId = id;
        this.showNote = true;
      },
      openLeaveModal(id) {
        this.promotionId = id;
        this.leaveModal = true;
      },
      closeLeaveModal(){
        this.leaveModal = false;
      },
      leaveEmp(){//辞退
        this.writeNote(2);
      }
    },
    filters: {
      format(time) {
        let date = new Date(time);
        return formatDate(date, 'yyyy-MM-dd');
      }
    },
    components:{
      "v-dialog": dialog
    }
  }
</script>

<style lang="stylus" scoped>
  @import "../../../assets/stylus/mixin.styl"
  .generalize-perform
    display: flex
    flex-direction: column
    wh(100%, 100%)
    background: #F5F5F5
    .perform-box
      .perform-content
        wh(100%, auto)
        background: #fff
        .perform-line
          background: #F5F5F5
          wh(100%, 0.267rem)
        .business-content
          display: flex
          align-items: center
          wh(100%, 1.333rem)
          .business-avatar
            width: 0.96rem
            height: 0.96rem
            border-radius: 0.16rem
            background: #f2f2f2
            margin-left: 0.28rem
            margin-right: 0.28rem
          .business-name
            font-size: 0.427rem
            color: rgba(51, 51, 51, 1)
            width: 5.88rem
            ellipsis()
            padding-top: 0.1rem
            padding-bottom: 0.1rem
          .next-icon
            margin-left: auto
            padding: 0.32rem
            wh(0.32rem, 0.32rem)
        .business-statistics
          margin-left: 0.32rem
          wh(9.68rem, 2.333rem)
          border-top: 0.027rem solid #F2F2F2
          .total-num1
            padding-top: 0.36rem
            padding-bottom: 0.12rem
            display: flex
            font-size: 0.373rem
            color: rgba(102, 102, 102, 1)
            .generalize-total
              color: #3CAFFF
              &:nth-child(1)
                margin-right: 0.533rem
          .total-num2
            display: flex
            align-items: center
            padding-top: 0.12rem
            padding-bottom: 0.12rem
            .note-text
              font-size: 0.373rem
              color: rgba(102, 102, 102, 1)
            .note-icon
              wh(0.32rem, 0.32rem)
              margin-left: 0.32rem
          .total-num3
            display: flex
            align-items: center
            padding-top: 0.12rem
            font-size: 0.347rem
            color: rgba(153, 153, 153, 1)
            .leave-time
              padding-left: 0.533rem
            .leave
              margin-left: auto
              margin-right: 0.32rem
              width: 1.6rem
              height: 0.64rem
              border: 0.027rem solid rgba(128, 128, 128, 1)
              border-radius: 0.32rem
              font-size: 0.347rem
              color: rgba(128, 128, 128, 1)
              background: #fff
    .empty-wrap
      fj(center, center)
      wh(100%, auto)
      position: fixed
      top: 0
      left: 0
      right: 0
      bottom: 0
      .empty-box
        width: 4.773rem
        height: auto
        .img-box
          width: 100%
          height: 4.773rem
          .empty
            width: 100%
            height: 100%
        .tip
          display: flex
          justify-content: center
          margin-top: 0.387rem
          font-size: 0.373rem
          color: rgba(68, 68, 68, 1)
    .write-note-modal
      position: fixed
      top: 0
      left: 0
      right: 0
      bottom: 0
      z-index: 98
      display: flex
      align-items: center
      justify-content: center
      background-color: rgba(0, 0, 0, 0.5)
    .write-note-box
      position: fixed
      top: 1.333rem
      left: 0
      right: 0
      z-index: 98
      margin: auto
      wh(8rem, 4.72rem)
      background: rgba(255, 255, 255, 1)
      border-radius(0.173rem)
      .title
        padding-top: 0.64rem
        padding-bottom: 0.64rem
        text-align: center
        size-color(0.48rem, rgba(51, 51, 51, 1))
        font-weight: 500
      .award-con
        display: flex
        align-items: center
        padding-bottom: 0.4rem
        justify-content: center
        .name-box
          display: flex
          align-items: center
          wh(6.88rem, 0.96rem)
          border: 0.027rem solid rgba(224, 224, 224, 1)
          border-radius(0.16rem)
          .name
            padding-left: 0.1rem
            wh(90%, 0.6rem)
            line-height: 0.6rem
            size-color(0.44rem, rgba(147, 147, 147, 1))
      .press-box
        margin: 0 auto
        wh(6.933rem, 1.067rem)
        .confirm
          background: rgba(60, 175, 255, 1)
          border-radius(0.16rem)
          wh(6.933rem, 1.067rem)
          line-height: 1.067rem
          text-align: center
          size-color(0.453rem, rgba(255, 255, 255, 1))
</style>
